<template>
    <!-- 页面容器 -->
    <div class="container">
            <!-- 疫情数据展示窗口 -->
            <div class="show-window">
                <div class="title">{{epidemicData.name}}</div>
                <div class="data-line">
                    <div class="data-block">
                        <div class="data-item">现有确诊</div>
                        <div :class="['data-item',fallColor]">{{epidemicData.econNum}}</div>
                    </div>
                    <div class="data-block">
                        <div class="data-item">累计确诊</div>
                        <div :class="['data-item','danger']">{{epidemicData.conNum}}</div>
                    </div>
                </div>
                <div class="data-line">
                    <div class="data-block">
                        <div class="data-item">累计治愈</div>
                        <div :class="['data-item','safety']">{{epidemicData.cureNum}}</div>
                    </div>
                    <div class="data-block">
                        <div class="data-item">累计死亡</div>
                        <div :class="['data-item','sadness']">{{epidemicData.deathNum}}</div>
                    </div>
                </div>
                <hr>
                <div class="image">
                    <img :src="fallImage" alt="">
                </div>
            </div>
             <!-- 顶部通知栏 -->
            <van-notice-bar
            scrollable
            left-icon="volume-o"
            :text="text"
            />

            <!-- 跳转按钮 -->
            <i :class="weatherIcon"></i>
            <van-button  to="/city" >
                {{
                    currentCityDate.name ? 
                    currentCityDate.name : 
                    locationCity.name
                }}
            </van-button>
   
       
        <!-- 地图容器 -->
        <div id="map"></div>

    </div>
   
</template>

<script setup>
import { computed, nextTick, onMounted, ref } from 'vue';
import { jsonp } from 'vue-jsonp'
// CC-- 导入pinia的两个方法
import { storeToRefs } from "pinia";
import {CStore} from '../stores/counter'
// 导入hook
import {useMap} from './Hooks/useMap.js'
import {useHttp} from './Hooks/useHttp.js'
import {useText} from './Hooks/useNoticeBarText'
import { getWeatherData } from './Hooks/useWeatherDate';
import { FlyTo } from "./Hooks/useFlyTo";
import { CityLayer } from "./Hooks/useCityLayer";

// 解构hook中的数据
const {map,view} = useMap()
const {CLD,CCD} = useHttp()
const {text} = useText()
const {CWeather} = getWeatherData()

// CC-- 解构出pinia中存储的数据
const $store = CStore()
const {locationCity,currentCityDate,cityWeatherDate} = storeToRefs($store)

const data = JSON.parse(localStorage.getItem('weather'))

const weatherIcon = computed(()=>{
   return 'qi-'+data.icon+'-fill'
})

// 指示show-window中文字颜色的渲染
const fallColor = computed(()=>{
    if(epidemicData.value.econNum <= 5){
        return 'safety'
    }else if(epidemicData.value.econNum >5 && epidemicData.value.econNum <=10){
        return 'warning'
    }else {
        return 'danger'
    }
})
// 指示show-window中图片信息的渲染
const fallImage = computed(()=>{
    if(epidemicData.value.econNum <= 5){
        return '../../public/解封.jpg'
    }else if(epidemicData.value.econNum >5 && epidemicData.value.econNum <=10){
        return '../../public/抗疫.jpg'
    }else {
        return '../../public/居家隔离.jpg'
    }
})

//疫情信息  
  const epidemicData = ref({
    name:'',
    econNum:0,//现有确诊
    conNum:0,//累计确诊
    cureNum:0,//累计治愈
    deathNum:0,//累计死亡
  })

  nextTick(()=>{
    setTimeout( async()=>{
        let res = await jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427',{output:'jsonp'})

        if(currentCityDate.value.name == '') {
            FlyTo(view.value,CLD.value.location)
            CityLayer(map.value,CLD.value.adcode,epidemicData.value.econNum)
            getWeatherData(CLD.value.location)
        }else {
            FlyTo(view.value,currentCityDate.value.location)
            CityLayer(map.value,currentCityDate.value.adcode,epidemicData.value.econNum)
            getWeatherData(currentCityDate.value.location)
        }


        const dataList = res.data.list
        
        for(let city of dataList) {
         
            if(currentCityDate.value.name == '') {
                
                // 当前城市为空,获取本地城市的疫情数据
                if(CLD.value.name == city.name) {
                    // 如果是直辖市
                    epidemicData.value = {
                                            name:city.name,
                                            econNum:city.econNum,
                                            conNum:city.value,
                                            cureNum:city.cureNum,
                                            deathNum:city.deathNum,
                                        }
                }else {
                    // 如果不是直辖市
                    for(let area of city.city) {
                        if(area.name == CLD.value.name) {
                            epidemicData.value = {
                                            name:area.name,
                                            econNum:area.econNum,
                                            conNum:area.conNum,
                                            cureNum:area.cureNum,
                                            deathNum:area.deathNum,
                                        }
                    
                        }
                    }
                }
            }else {
                // 当前城市不为空,获取当前城市的疫情数据
               
                if(currentCityDate.value.name == city.name) {
                    // 如果是直辖市
                    epidemicData.value = {
                                            name:city.name,
                                            econNum:city.econNum,
                                            conNum:city.value,
                                            cureNum:city.cureNum,
                                            deathNum:city.deathNum,
                                        }
                }else {
                    // 如果不是直辖市
                    for(let area of city.city) {
                        if(area.name == currentCityDate.value.name) {
                            epidemicData.value = {
                                            name:area.name,
                                            econNum:area.econNum,
                                            conNum:area.conNum,
                                            cureNum:area.cureNum,
                                            deathNum:area.deathNum,
                                        }
                        }
                    }
                }
            }
        }

    },200)



  })

</script>

<style scoped>
.container {
    background-color: #1678ff;
}

#map {
    height: 90vh;
    width: 100vw;
}

.van-button {
    background-color: #1678ff;
    color: #fff;
    padding: 20px 30px 20px 35px;
}

i {
    position: absolute;
    top: 54px;
    left:8px;
    color: #e5dcf0;
    /* color: #fd7469; */
    z-index: 100;
}

.show-window {
    position: absolute;
    top: 90px;
    right:20px;
    width: 300px;
    height: 500px;
    padding: 30px;
    background-color: #e5dcf0;
    /* color: #e5dcf0; */
    z-index: 100;
    border-radius: 10px;
    box-sizing: border-box;
}

.show-window .title {
    height: 50px;
    width: 100px;
    /* background-color: red; */
    margin-bottom: 20px;
    font-size: 36px;
    /* font-weight: bold; */
    font-family: STHupo;
}

.show-window .data-line {
    display: flex;
    justify-content:space-around;
    width: 100%;
    height: 70px;
    /* background-color: #1678ff; */
    margin-bottom: 20px;
}

.show-window .data-line .data-block {
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items:center;
    height: 100%;
    width: 100px;
    /* background-color: pink; */
}
.data-line .data-block .data-item {
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 20px;
 

}

.danger {
    color: red;
}
.warning {
    color: #e57631;
}
.safety {
    color: green;
}
.sadness {
    color: #4e5a65;
}


.image {
    width: 100%;
    height: 180px;
    background-color: #1678ff;
}
.image img {
    width:100%;
    height:100%;
}
</style>